<template>
  <div class="login">
    <div class="fy-content">
      <div class="fy_content">
        <!-- logo -->
        <div class="fy_top">
          <img
            src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019pILfAg7Avr1567732916.png"
            alt
          />
        </div>
        <!-- 输入手机号 -->
        <div class="fy_num">
          <input type="text" maxlength="11" placeholder="请输入手机号" v-model="fy_dl_sjh" />
        </div>
        <div class="fy_num">
          <!-- 输入密码 -->
          <input type="text" placeholder="请输入密码" v-model="fy_dl_pass" />
        </div>
        <div class="fy_others">
          <!-- 跳转找回密码路由 -->
          <span @click="fy_toForget()">找回密码</span>
          <!-- 跳转注册/验证码登录路由 -->
          <span @click="fy_toSms()">注册/验证码登录</span>
        </div>
      </div>
      <!-- 登录按钮 -->
      <div class="fy_login">
        <van-button round type="warning" eb6100 size="large" class="fy_button" @click="fy_dl()">登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      fy_dl_sjh: "",
      fy_dl_pass: "",
      fy_to_ken: ""
      //   list: JSON.parse(localStorage.getItem("dl")) || []
    };
  },
  methods: {
    // 跳转到找回密码路由
    fy_toForget() {
      this.$router.push("/forget");
    },
    // 跳转到注册/验证码登录路由
    fy_toSms() {
      this.$router.push("/sms-login");
    },
    fy_dl() {//--->点击登录的时候
      //-->点击登录的时候还要判断手机号是否是注册过的，在读取一遍接口、如果没有注册，提示该手机号没有注册
      //--->要判断密码、手机号、
      if (this.fy_dl_sjh == "" || this.fy_dl_pass == "") {
        this.$toast("手机号或密码不能为空");
        return false;
      } else {
        //1.点击获取验证码的时候，先判断手机号的格式对不对；
        var ipone = /^[1]([3-9])[0-9]{9}$/;
        var test1 = ipone.test(this.fy_dl_sjh);
        if (test1) {
          var aa = /^\w{6,24}$/;
          var test = aa.test(this.fy_dl_pass);
          var token = this.$store.state.User.token;
          if (test) {
            this.axios
              .post(
                "https://test.365msmk.com/api/app/login",
                {
                  //--->获取浏览器储存用户输入的手机号
                  mobile: this.fy_dl_sjh,
                  //--->获取用户输入的密码
                  password: this.fy_dl_pass,

                  type: 1
                },
                {
                  //--->获取浏览器储存用户登录后获取的令牌，token
                  headers: {
                    Authorization: "Bearer " + token
                  }
                }
              )
              .then(ret => {
                console.log("====================================");
                console.log(ret);
                console.log("====================================");
                // this.fy_to_ken = ret.data.data.remember_token;
                // sessionStorage.setItem("code", this.fy_zc_dx);
                if (ret.data.code == 200) {
                  //--->token 相当于门卡一样，有他才会通过，没有就进不去
                  // var token = "'Bearer '+ret.data.data.remember_token"
                  // sessionStorage.setItem('token',token)
                  localStorage.setItem("login", ret.data.data.password);
                  this.$router.push("/my");
                  this.$store.commit("token", ret.data.data);
                  // sessionStorage.setItem("token",ret.data.data.remember_token);
                } else {
                  this.$toast("用户或密码错误");
                  return false;
                }
              });
          } else {
            this.$toast("密码格式不正确");
            return false;
          }
        } else {
          this.$toast("手机号码格式不对");
          return false;
        }
      }
    }
  }
};
</script>

<style lang='scss' scoped>
html,
body,
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  .fy-content {
    width: 100%;
    overflow: auto;
    flex: 1;
    .fy_content {
      width: 100%;
      .fy_top {
        width: 100%;
        img {
          width: 60%;
          margin: 1rem auto;
          display: block;
        }
      }
      .fy_num {
        font-size: 0.3rem;
        width: 5rem;
        margin: 0 auto;
        input {
          border: 0;
          display: block;
          margin: 0 auto;
          box-sizing: border-box;
          padding: 0.3rem 0;
          height: 100%;
          font-size: 0.25rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          line-height: 0.3rem;
          float: left;
          outline: none;
        }
      }
      .fy_others {
        width: 5rem;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;

        span {
          font-size: 0.2rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #999;
        }
      }
    }
    .fy_login {
      width: 6.4rem;
      height: 1.2rem;
      text-align: center;
      .fy_button {
        width: 80%;
        font-size: 0.25rem;
        margin-left: 0;
      }
    }
  }
}
</style>
